import React from "react";
import {Checkbox, Col, Row, Table} from "antd";
import {
    buildColumn,
    COL_NO,
    COL_OP,
    LdhButton,
    LdhFormItem,
    LdhFrom,
    LdhInputNumber,
    LdhListSelect,
    LdhLog,
    LdhPage
} from "@biz/Components";

import "./style.less";
import Action from "./Action";

const prefix = "email-page";
const columns = [
    COL_NO,
    buildColumn("标题", "subject", 200),
    buildColumn("收件人", "to", 140, {className:"text-ellipsis"}),
    COL_OP
]
export default class EmailPage extends React.Component {
    formRef = React.createRef();
    logRef = React.createRef();

    constructor() {
        super();
        this.state = {
            initValues: {delta: 10, cb_send: true, cb_delete: true, cb_ignore: true},
            detailStatus: "",
            list: [{subject:"1"}],
            isStart: false,
            settings: []
        }
        this.action = new Action(this);
    }

    componentDidMount() {
        columns[columns.length - 1].render = this.renderRowAction.bind(this);
        this.getSettingList();
        window.addEventListener("email-add", this.handleAddEvent.bind(this));
        window.addEventListener("email-log", this.handleLogEvent.bind(this));

    }

    handleLogEvent(e){
        if(this.logRef.current && this.logRef.current.add){
            this.logRef.current.add(e)
        }

    }
    handleAddEvent(e){
        let vo = e.detail;
        let {list} = this.state;
        list.push(vo);
        list = [...list];
        this.setState({list})
    }

    componentWillUnmount() {
        window.removeEventListener("email-add", this.handleAddEvent.bind(this))
        window.removeEventListener("email-log", this.handleLogEvent.bind(this))
    }

    getSettingList() {
        this.action.getSettingList((settings) => this.setState({settings}));
    }


    renderRowAction(v, vo, index) {
        return <div>

        </div>
    }

    handleStart() {
        this.formRef.current.validateFields().then(vo => {
            this.setState({isStart: true})
            this.action.doStart(vo);
        })

    }

    handleStop() {
        this.action.doStop();
        this.setState({isStart: false})
    }

    handleClearList() {
        this.setState({list: []})
    }

    renderTop() {
        let {isStart, initValues, settings = []} = this.state;

        return <LdhFrom ref={this.formRef} labelWidth="80px" initialValues={initValues}>
            <Row>
                <Col flex="250px">
                    <LdhFormItem name="delta" label="间隔(秒)" required>
                        <LdhInputNumber className="w-170"/>
                    </LdhFormItem>
                    <LdhFormItem name="setting" label="邮箱配置" required>
                        <LdhListSelect list={settings} className="w-170"/>
                    </LdhFormItem>
                    <LdhFormItem name="cb_send" isCheckbox>
                        <Checkbox>已发送邮件</Checkbox>
                    </LdhFormItem>
                    <LdhFormItem name="cb_delete" isCheckbox>
                        <Checkbox>已删除邮件</Checkbox>
                    </LdhFormItem>
                    <LdhFormItem name="cb_ignore" isCheckbox>
                        <Checkbox>忽略当天之前的邮件</Checkbox>
                    </LdhFormItem>
                </Col>
                <Col flex="auto">
                    {isStart
                        ? <LdhButton size="large" type="primary" danger
                                     onClick={this.handleStop.bind(this)}>停止</LdhButton>
                        : <LdhButton size="large" type="primary" onClick={this.handleStart.bind(this)}>启动</LdhButton>
                    }

                </Col>
            </Row>
        </LdhFrom>
    }

    render() {
        let {list = []} = this.state;
        return  <LdhPage>
            <Row className={prefix}>
                <Col flex="auto">
                    {this.renderTop()}
                    <div className="mt-10 flex-end">
                        <LdhButton onClick={this.handleClearList.bind(this)}>清空列表</LdhButton>
                    </div>
                    <Table dataSource={list} columns={columns} pagination={false} size="small"/>
                </Col>
                <Col flex="400px">
                    <LdhLog ref={this.logRef}></LdhLog>
                </Col>
            </Row>
        </LdhPage>
    }
}
